Add Feature Box Alignment of abspos elements#2947
Add Feature Box Alignment of abspos elements#2947jamesnw wants to merge 2 commits intoweb-platform-dx:mainfrom
Conversation
This comment was marked as off-topic.
This comment was marked as off-topic.
| @@ -0,0 +1,8 @@ | |||
| name: Box alignment of absolute positioned elements | |||
There was a problem hiding this comment.
I find this name a bit long, and I wonder if developers are going to easily associate it to what the feature is about.
How about "Absolute positioning alignment"?
Unfortunately, I can't find much resources online that talk about this. I was hoping to find a commonly accepted feature name, but no.
The only thing I could find is my own (now outdated) css alignment cheatsheet.
But, reading it again, I think the scope of this feature here is different, and I'm finding myself a bit confused by all of the ways in which the align-* and justify-* properties can be used.
The feature you are proposing is specifically about absolute positioning. When I tested it, I found that justify-self seems to work fine (i.e. setting it to center does center the absolutely positioned box within its container), but align-self is surprising (e.g. to center the box, I need to use the value anchor-center as center doesn't do what I expect it to do).
Is there also a feature we should be creating about aligning elements within a block layout (as opposed to aligning them within a grid, or flex layout)?
For example, we already have align-content in block layouts. I wonder if we should expand this feature to be more generally about alignment within block layouts. Indeed, while align-content does work like padding, when set on the container block layout, there's also justify-items (or justify-self on children elements) which works kind of like margin and can be used to align elements along the inline axis. See https://patrickbrosset.com/lab/alignment-in-blocks/ and its source code.
The following keys are duplicated in
absolute-positioning. I think it's reasonable to have them in both, but removing them fromabsolute-positioningwould allow us to remove thecompute_from. This would be blocked by #1173.Addresses #2905